<template>
   <div class="activity_list activity">
     <navbar>我的报名</navbar>
     <div class="content">
       <Slide-bar :height="heights" :canDrag="isDrag" :list="tabList" :index="tabIndex" @on-change="change">
         <div :slot="`slot-item-${k}`" v-for="(i,k) in tabList" class="myActivity_list">
           <LoadMore :height="heights" :load-more="loadMore" :auto=false :refresh="refresh" ref="pulldown" :has-more="tabList[tabIndex].hasMore">
           <div class="list"  style="background-color: #eee;height: 100%">
             <ul>
               <li v-for="i in dataList[tabIndex]" class="apply_list" @click="jump('register_detail', i.id)">
                 <div class="list-in">
                   <button class="tag" :class=" i.status | ac_status ">{{ i.status | ac_status_txt }}</button>
                   <div class="right">
                     <h2 class="vlc-nowrap">{{ i.title }}</h2>
                     <p class="vlc-nowrap time">{{ i.starts_at | time(i.ends_at) }}</p>
                     <div class="vlc-nowrap location">{{ i.address }}</div>
                   </div>
                 </div>
                 <div class="mx-1px-top userStatus"><button :class="i.status | user_status_class(i.member_status)">{{ i.status | user_status_txt(i.member_status) }}</button></div>
               </li>
             </ul>
           </div>
           </LoadMore>
         </div>
       </Slide-bar>
     </div>
   </div>
</template>
<script type="text/ecmascript-6">
  import js from '../../../../cores/user/my_activity.vue';

  export default {
    extends: js
  }
</script>
<style rel="stylesheet/less" lang="less">
  @import "../../../../styles/ot.less";
  .activity_list{
  .noList{
    z-index: 999;
  }
  .vlc-slideBar{
    height:100%;
    .vlc-slideBar-wrapper{
      border-bottom: 1px solid #cccccc;
      padding:8px 0;
    }
    .vlc-slideBar-container{
      height: 100%;
      background-color: #eeeeee;
    .apply_list{
      margin-bottom: 10px;
    }
    }
    .vlc-slideBar-content-item{
      overflow-y: auto;
      .myActivity_list{
        height: 100%;
        padding-bottom: 50px;
      }
    }
  }
  }

</style>
